<script setup lang="ts">
import {nextTick, onBeforeMount, onMounted, onUnmounted, reactive, ref} from "vue";
import {Editor} from '@/components/Editor'
import UploadDefault from "@/components/UploadFile/UploadDefault.vue";
import {ElMessage} from "element-plus";
import PreviewFile from "@/views/content-manage/component/PreviewFile.vue";
import {dataInsert, dataUpdate, dataInfo} from "@/api/content";
import {columnList} from "@/api/column";
import {useRoute, useRouter} from "vue-router";
import {useStorage} from '@/hooks/web/useStorage'
import {useValidator} from "@/hooks/web/useValidator";
import {any} from "vue-types";

const {required} = useValidator()
const {setStorage, getStorage, removeStorage} = useStorage()
const router = useRouter()
const route = useRoute()
const formRef = ref()
const file = ref()
const form = reactive({
  id: '',
  author_name: '',
  cate_id: '',
  thumb_url: [],
  title: '',
  keyword: '',
  descript: '',
  content: '',
  created_at: '',
  add_time: '',
  updated_at: '',
  view_time: 1,
  sort_time: 1,
  author_id: ''
})
const formRules = {
  cate_id: required('请选择栏目'),
  title: required('请输入文章标题'),
  keyword: required('请输入文章关键字'),
  descript: required('请输入文章描述'),
}
const columnOpt = ref([])
const dialog = ref()
const loading = ref(false)
const change = (editor) => {

}

const handleSave = (param) => {
  formRef.value.validate(async valid => {
    if (valid) {
      let res: any = ''
      if (file.value.fileList.length) {
        form.thumb_url = file.value.fileList[0].file_id
      }

      if (form.id) {
        res = await dataUpdate(form)
      } else {
        res = await dataInsert(form)
      }
      if (res) {
        if (!route.query.id) {
          form.id = res.data.id
          setStorage('contentId', form.id)
        }
        ElMessage({message: '保存成功', type: 'success'})
        if (param) {
          router.back()
        } else {
          await fetchData()
        }
      }
    } else {
      return false
    }
  })
}

const getColumn = async () => {
  let res = await columnList();
  if (res) {
    columnOpt.value = res.data
  }
}

const fetchData = async () => {
  loading.value = true
  let res = await dataInfo({id: form.id || getStorage('contentId')})
  loading.value = false
  if (res) {
    if (res.data.thumb_url) {
      file.value.fileList = [res.data.thumb_url]
    }
    Object.assign(form, res.data)
  }
}

getColumn()
if (route.query.id || getStorage('contentId')) {
  form.id = route.query.id
  nextTick(() => {
    fetchData()
  })
}

onUnmounted(() => {
  removeStorage('contentId')
})
</script>

<template>
  <preview-file :dialog="dialog" @close-dialog="dialog = false"></preview-file>
  <el-form :model="form" ref="formRef" :rules="formRules" label-width="100px">
    <el-row v-loading="loading">
      <el-col :span="18" class="el-wrap">
        <el-col :span="10">
          <el-form-item label="栏目" prop="cate_id">
            <el-select v-model="form.cate_id" style="width: 100%;">
              <el-option v-for="item in columnOpt" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input placeholder="请输入标题" v-model="form.title"/>
          </el-form-item>
          <el-form-item label="缩略图">
            <upload-default :file-type="'picture'" ref="file" :file-accept="'.jpg,.png,.jpeg'">
              <template v-slot:button>
                <el-button type="primary" icon="UploadFilled">上传</el-button>
              </template>
            </upload-default>
            <!--            <el-button style="margin-top:-10px;margin-left: 10px" icon="FolderOpened" @click="dialog = true">浏览-->
            <!--            </el-button>-->
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input placeholder="请输入关键字,多个关键字使用逗号隔开" v-model="form.keyword"/>
          </el-form-item>
          <el-form-item label="描述" prop="descript">
            <el-input placeholder="请输入描述" type="textarea" autosize v-model="form.descript"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <Editor v-model="form.content" ref="editorRef" @change="change"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave('')">保存内容</el-button>
            <el-button type="success" @click="handleSave('back')">保存并返回</el-button>
            <el-button @click="router.back()">返回</el-button>
          </el-form-item>
        </el-col>

      </el-col>
      <el-col :span="5" :offset="1" class="el-wrap">
        <el-form-item label="录入人" v-if="route.query.id">
          {{ form.author_name }}
        </el-form-item>
        <el-form-item label="录入时间" prop="created_at">
          <el-date-picker
              v-model="form.created_at"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="录入时间"
          />
        </el-form-item>
        <el-form-item label="更新时间" prop="updated_at">
          <el-date-picker
              v-model="form.updated_at"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="更新时间"
          />
        </el-form-item>
        <el-form-item label="浏览数" prop="view_time">
          <el-input-number v-model="form.view_time" :min="1"/>
        </el-form-item>
        <el-form-item label="排序值" prop="sort_time">
          <el-input-number v-model="form.sort_time" :min="1"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped lang="less">
.el-wrap {
  background-color: #fff;
  padding: 40px 20px;
}
</style>